<template>
	<div class="customer-message-container">
		<div class="left">
			<el-tag v-for="item in roleData" :key="item.id" class="role-tag" :class="{ activeTag: activeTag === item.id }" @click="checkRole(item.id)">{{ item.name }}</el-tag>
			<span class="add-role" @click="addRole">+ 添加角色</span>
		</div>
		<div class="right">
			<el-button type="danger" class="delete-role" @click="deleteRole">删除角色</el-button>
			<el-button type="primary" class="add-variable" @click="addCustomerVariable">新增变量</el-button>
		</div>
		<div class="table">
			<Table :tableData="customerData">
				<template v-slot:details>
					<el-table-column width="200px" align="center" label="脱敏配置">
						<template slot-scope="scope">
							<el-button type="text" @click="customerDetails(scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</template>
				<template v-slot:variableStatus>
					<el-table-column width="120px" align="center" label="状态">
						<template slot-scope="scope">
							<span class="table-status">{{ !scope.row.isDisabled ? '启用' : '停用' }}</span>
						</template>
					</el-table-column>
				</template>
				<template v-slot:btn>
					<el-table-column width="250px" align="center" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" class="edit-btn" @click="deleteCustomerVariable(scope.row)" v-if="!scope.row.isDefault">删除</el-button>
							<el-button size="mini" class="edit-btn" @click="editCustomerVariable(scope.row)">修改</el-button>
							<span v-if="scope.row.linkedKey === 'fullName' || scope.row.linkedKey === 'idCardNo' || scope.row.linkedKey === 'picture' || scope.row.linkedKey === 'gender'">
								<el-button size="mini" :class="!scope.row.isDisabled ? 'stop-btn' : 'open-btn'" @click="changeStatus(scope.row)">{{
									!scope.row.isDisabled ? '停用' : '启用'
								}}</el-button>
							</span>
						</template>
					</el-table-column>
				</template>
			</Table>
		</div>
		<div class="page">
			<PageSize :pages="customerData.pageData" @changePageSize="changeCustomerPageSize" @changeCurrentPage="changeCustomerCurrentPage" />
		</div>
		<AddRole :showRoleDialog="showRoleDialog" :roleData="roleData" @cancelRole="cancelRole" @saveRole="saveRole" />
	</div>
</template>

<script>
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';
import AddRole from './varComponents/AddRole.vue';
import { addRoleName } from '@/api/api';
export default {
	name: '',
	components: { Table, PageSize, AddRole },
	props: {
		customerData: {
			require: true,
			type: Object,
			default: () => {}
		},
		roleData: {
			require: true,
			type: Object,
			default: () => {}
		},
		scenarioId: {
			require: true,
			type: Number,
			default: () => 0
		},
		activeTag: {
			require: true,
			type: Number,
			default: () => 1
		}
	},
	data() {
		return {
			showRoleDialog: false,
			isDisabled: false
		};
	},
	mounted() {},
	methods: {
		addRole() {
			// this.$emit('addRole');
			this.showRoleDialog = true;
		},
		cancelRole() {
			this.showRoleDialog = false;
		},
		saveRole(form) {
			this.showRoleDialog = false;
			console.log('saveRole', form);
			addRoleName(this.scenarioId, { name: form })
				.then(res => {
					console.log(res.data);
					this.$message.success('添加角色成功！');
					if (this.$parent.$parent && this.$parent.$parent.$parent) {
						this.$parent.$parent.$parent.initAllRole();
					}
				})
				.catch(err => {
					console.log(err);
					if (err.code == '6009') {
						this.$message.error(`业务场景启用中，无法进行操作！`);
					} else {
						this.$message.error('添加角色失败！');
					}
				});
		},
		deleteRole() {
			this.$emit('deleteRole');
		},
		addCustomerVariable() {
			this.$emit('addCustomerVariable');
		},
		deleteCustomerVariable(row) {
			this.$emit('deleteCustomerVariable', row);
		},
		editCustomerVariable(row) {
			this.$emit('editCustomerVariable', row);
		},
		customerDetails(row) {
			this.$emit('customerDetails', row);
		},
		changeCustomerPageSize(pageSize) {
			this.$emit('changeCustomerPageSize', pageSize);
		},
		changeCustomerCurrentPage(page) {
			this.$emit('changeCustomerCurrentPage', page);
		},
		checkRole(id) {
			// console.log('checkRole', id);
			// this.activeTag = id;
			this.$emit('checkRole', id);
		},
		changeStatus(row) {
			this.$emit('changeStatus', row);
		}
	}
};
</script>

<style lang="less" scoped>
.customer-message-container {
	// .customer-box {
	// display: flex;
	// justify-content: space-between;

	.left {
		display: flex;
		flex-wrap: wrap;
		width: 1100px;
		.role-tag {
			height: 32px;
			background: #ffffff;
			border-radius: 4px;
			color: #6784f2;
			border: 1px solid #c9def8;
			margin: 8px 7px 0;
			cursor: pointer;
		}
		.activeTag {
			height: 32px;
			border-radius: 4px;
			background-color: #e7f2fe;
			border: 1px solid #c9def8;
			color: #5374f2;
			margin: 8px 7px 0;
			cursor: pointer;
		}
		.add-role {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #555555;
			margin-left: 13px;
			padding: 14px 0;
			cursor: pointer;
		}
	}
	.right {
		position: absolute;
		top: 0;
		right: 20px;
		.delete-role {
			background: #ffffff;
			border: 1px solid #f05753;
			border-radius: 4px;
			color: #f05652;
			line-height: 6px;
		}
		.add-variable {
			background: #ffffff;
			border: 1px solid #6384fe;
			border-radius: 4px;
			line-height: 6px;
			color: #6384fe;
		}
	}
	// }
	.edit-btn {
		background: #6384fe;
		color: #fff;
	}

	.table-status {
		color: #606266;
		font-size: 14px;
	}
	.open-btn {
		background-color: #e6a23c;
		color: #fff;
		margin-left: 10px;
	}
	.stop-btn {
		color: #fff;
		background-color: #ef5753;
		margin-left: 10px;
	}
}
</style>
<style lang="less">
.customer-message-container .el-table thead {
	color: #676a6c;
	tr {
		th {
			background-color: #f8f8f9;
		}
	}
}
.customer-message-container {
	.table {
		width: 80% !important;
		margin-top: 33px;
	}
	.page {
		margin-top: 30px;
	}
}
</style>
